<template>
  <div>
    <!--    面包屑+新增按钮+批量删除按钮+搜索框和按钮-->
    <div>
      <div style="height: 30px">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">讲师管理</a></el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div style="width: 100%;height: 60px;display: flex;;flex-direction: row;justify-content:space-between">
        <div style="flex: 5;padding: 0px;margin: 0px;line-height:50px">
          <el-button icon="el-icon-plus" style="margin-left: 10px" @click="add">新增</el-button>

          <el-button icon="el-icon-delete" @click="deletes">批量删除</el-button>
        </div>
        <div style="flex: 2">

          <el-form  :inline="true" :model="{tableData}" class="demo-form-inline" >
            <el-input placeholder="请输入姓名" v-model="name" clearable style="width: 200px"></el-input>
            <el-button @click="onSubmit" icon="el-icon-search"></el-button>
          </el-form>
        </div>

      </div>
    </div>
    <!--    内容展示-->
    <div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          label="id"
          width="120">
<!--          <template v-slot:default="scope">{{ scope.row.date }}</template>-->
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="account"
          label="账户"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="level"
          label="等级"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="brief"
          label="个人简介"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          width="350px"
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit"
              size="mini"
              @click="handleEdit(scope.row)"></el-button>
<!--            <el-button icon="el-icon-delete" size="mini" type="danger" @click="handleDelete(scope.row.id)"></el-button>-->
            <el-popconfirm
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-info"
              icon-color="red"
              style="margin-left: 5px"
              title="您确定删除吗？"
              @confirm="handleDelete(scope.row.id)"
            >
              <el-button type="danger" size="mini" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    页面显示-->
    <div class="block" style="">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <div>
      <el-dialog
        :title="diaologTitle"
        :visible.sync="dialogVisible"
        width="50%"
        >
        <div>
          <el-form  label-width="80px" :model="formLabelAlign">


            <el-form-item label="姓名" prop="name">
              <el-input v-model="formLabelAlign.name"></el-input>
            </el-form-item>
            <el-form-item label="电话号码" prop="phone">
              <el-input v-model="formLabelAlign.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="formLabelAlign.email"></el-input>
            </el-form-item>
            <el-form-item label="登录账号" prop="account">
              <el-input v-model="formLabelAlign.account"></el-input>
            </el-form-item>

            <el-form-item label="登录密码" prop="password">
              <el-input v-model="formLabelAlign.password"></el-input>
            </el-form-item>

            <el-form-item label="等级" prop="level">
              <el-input v-model="formLabelAlign.level"></el-input>
            </el-form-item>

            <el-form-item label="brief" prop="个人简历">
              <el-input v-model="formLabelAlign.brief"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="save">确 定</el-button>
                    </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import ajax from "axios";
import axios from "axios";
import requests from "@/axios/axios";

export default {
  name: "teacherManage",
  created() {
    this.getTableData();
  },
  data() {
    return {
      ids:[],
      selectionList:[],

      pageNo: 1,
      total: 0,
      pageSize: 2,

      name:"",
      tableData: [],
      teachers:{
        id:'',
        name:'',
        phone:'',
        email:'',
        account:'',
        password:'',
        level:'',
        brief:''
      },

      diaologTitle:'',
      dialogVisible: false,

      formLabelAlign: {
        id:'',
        name:'',
        phone:'',
        email:'',
        account:'',
        password:'',
        level:'',
        brief:''
      }
    };
  },

  methods: {

    //多选框
    handleSelectionChange(val) {
      // console.log(val)
      this.selectionList=val
    },
    //批量删除
    deletes() {
      this.ids=this.selectionList.map(value=>value.id)
      ajax({
        url: "http://localhost:8081/Teacher/deletes?ids="+this.ids,
        method: "delete",
      }).then(res => {
        if (res.data.code === '0'){
          this.$message.success("批量删除成功")
          this.getTableData();
        }else {
          this.$message.error(res.msg)
        }
      })
    },

    //添加
    add() {
      this.dialogVisible = true;
      this.diaologTitle="增加老师"
      this.formLabelAlign = {};
    },
    //更改
    handleEdit(row) {
      this.dialogTitle="修改老师信息"
      this.formLabelAlign = JSON.parse(JSON.stringify(row))//深拷贝
      this.dialogVisible = true
    },
    //保存
    async save() {
      console.log("save");
      if(this.dialogTitle==="修改老师信息"){

        //  更新
        requests.post("http://localhost:8081/Teacher/updateTeacher",this.formLabelAlign).then(res =>{
          console.log(res)
          if (res.code === '0'){
            this.$message({
              type: "success",
              message: "更新成功"
            })
          }else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.getTableData()//刷新整个列表
          this.dialogVisible = false
        })
      }else {
        console.log(this.formLabelAlign)
        ajax({
          url: "http://localhost:8081/Teacher/insertTeacher",
          method: "post",
          data: this.formLabelAlign
        }).then(res => {
          if (res.data.code == "0"){
            this.$message({
              type: "success",
              message: "增加成功"
            })
          }
          else {
            this.$message({
              type: "error",
              message: "增加失败"
            })
          }
          // this.tableData = res.data;
          this.dialogVisible = false;

          console.log(111111);
          this.getTableData();
        });
      }
    },

  //删除
    handleDelete(id) {
      axios({
        url: "http://localhost:8081/Teacher/deleteTeacherByid/" + id,
        method: "delete"
      }).then((res) => {
        if (res.data.code == '0'){
          this.$message({
            type: "success",
            message: "删除成功"
          })
        }else {
          this.$message({
            type: "error",
            message: "删除失败"
          })
        }
        this.getTableData();
      });
    },
    //分页
    handleCurrentChange(currentChange) {
      this.pageNo = currentChange;
      this.getTableData();
    },
    handleSizeChange(sizeChange) {
      this.pageSize = sizeChange;
      this.getTableData();
    },
    //表格显示
    getTableData() {
    ajax({
        url: "http://localhost:8081/Teacher/queryAllTeacher?pageNum=" + this.pageNo + "&pageSize=" + this.pageSize,
        method: "get"
      }).then(res => {
        this.tableData = res.data.data;
      });
      this.$axios
        .get("http://localhost:8081/Teacher/numberOfTeachers")
        .then(res => {
          this.total = res.data
          console.log(res.data)
        });
    },
    //通过姓名搜索
    onSubmit() {
      // axios({
      //   url: "http://localhost:8081/Teacher/queryUserByUserName/" + this.teachers.name,
      //   method: "get"
      // }).then(res => {
      //
      //   this.tableData = res.data;
      //
      // });
      if (this.name){
        console.log(this.name);
        requests.get("http://localhost:8081/Teacher/queryUserByUserName",{params:{name:this.name}}).then(res =>{
          console.log(res.data)
          console.log(this.name)
          this.tableData = res.data;
          this.total = res.data.length
        })
      }else {
        this.getTableData()
      }
    }
  }
};
</script>

<style scoped>

</style>